<template>
    <div id="content">
        <!-- header -->
        <el-row class="header">
            <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1" class="title">XAOYAOYAO</el-menu-item>
                <router-link class="el-menu-item" to="/home">首页</router-link>
                <router-link class="el-menu-item link" to="">个人中心</router-link>
            </el-menu>

        </el-row>
        <!-- container -->
        <el-row class="sub_container">
            <!-- left -->
            <el-col :span="4" class="menu">
                <el-menu default-active="2" router class="menu" @open="handleOpen" @close="handleClose">
                    <el-menu-item index="/main/carousel"><i class="el-icon-star-on"></i>Carousel</el-menu-item>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>菜单二</template>
                        <el-menu-item-group title="Basic">
                            <el-menu-item index="/main/layout">Layout 布局</el-menu-item>
                            <el-menu-item index="/main/color">Color 色彩</el-menu-item>
                            <el-menu-item index="/main/button">Button 按钮</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="Other">
                            <el-menu-item index="/main/dialog">对话框</el-menu-item>
                            <el-menu-item index="/main/pagination">Pagination 分页</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="/main/collapse"><i class="el-icon-star-on"></i>Collapse</el-menu-item>
                    <el-menu-item index=""><i class="el-icon-star-on"></i>菜单四</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>Table</template>
                        <el-menu-item-group title="子菜单标题一">
                            <el-menu-item index="">子菜单一</el-menu-item>
                            <el-menu-item index="">子菜单二</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="子菜单标题二">
                            <el-menu-item index="">子菜单一</el-menu-item>
                            <el-menu-item index="">子菜单二</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <!-- right -->
            <el-col :span="20" class="right_content">
                <div class="tabs">
                    <router-view></router-view>
                </div>
            </el-col>
        </el-row>
        <!-- footer -->
        <el-row class="footer">
            <p class="footerMsg">Copyright © 2017 xaoyaoyao</p>
        </el-row>
    </div>
</template>
<style>

</style>
<script>
    require('../assets/main.css')

    export default {
        data () {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            }
        },
        components: {},
        mounted () {
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style>
    .sub_container {
        width: 99.5%;
        height: 88%;
    }

    .right_content {
        width: 83.33333%;
        height: 100%;
    }

    .menu {
        height: 100%;
    }

    .tabs {
        width: 100%;
        height: 100%;
    }
</style>
